<template>
  <div>
    <h2 style='text-align:center;'>元素移动demo</h2>
    <div class='header'>
      <div class='header_div'>方块1的坐标：{{`${zb1[0]},${zb1[1]}`}}</div>
      <div class='header_div'>方块2的坐标：{{`${zb2[0]},${zb2[1]}`}}</div>
      <div class='header_div'>方块3的坐标：{{`${zb3[0]},${zb3[1]}`}}</div></div>
    <div class='content'
    >
      <VueXiaoerDragEle
        :w="100"
        :h="100"
        :parent="true"
        :debug="false"
        :min-width="100"
        :min-height="100"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="1"
        @dragging='dragging1'
        class="test1"
      >
      </VueXiaoerDragEle>
      <VueXiaoerDragEle
        :w="100"
        :h="100"
        :parent="true"
        :x="400"
        :y="200"
        :debug="false"
        :min-width="100"
        :min-height="100"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="1"
        @dragging='dragging2'
        class="test2"
      >
      </VueXiaoerDragEle>
      <VueXiaoerDragEle
        :w="100"
        :h="100"
        :parent="true"
        :x="800"
        :y="400"
        :debug="false"
        :min-width="100"
        :min-height="100"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="1"
        @dragging='dragging3'
        class="test3"
      >
      </VueXiaoerDragEle>
    </div>
    </div>
</template>

<script>
import VueXiaoerDragEle from './components/VueXiaoerDragEle.vue'
import './components/VueXiaoerDragEle.css'
export default {
  name: 'App',
  components: {
    VueXiaoerDragEle
  },
  data () {
    return {
      zb1: [0, 0],
      zb2: [400, 0],
      zb3: [800, 0]
    }
  },
  methods: {
    dragging1 (x, y) {
      this.zb1 = [x, y]
    },
    dragging2 (x, y) {
      this.zb2 = [x, y]
    },
    dragging3 (x, y) {
      this.zb3 = [x, y]
    }
  }
}
</script>
<style>

.header{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 12px;
}
.header_div{
  width: 200px;
}
.content{
  height: 500px;
  width: 900px;
  border: 1px solid red;
  position: relative;margin: 0 auto;
}
.test1 {
  background-color: red
}
.test2 {
  background-color: yellow
}
.test3 {
  background-color: blue
}
</style>
